<!DOCTYPE html>
<html>
<head>
<%include("../../tpl/head.html"){}%>
<title>后台管理-资源管理</title>
</head>
<body class="hold-transition fixed skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- 头部 -->
		<%include("../../tpl/header.html"){}%>
		<!-- 网页正文 -->
		<div class="content-wrapper">
			<!-- 网页正文-面包屑 -->
			<section class="content-header">
				<h1>资源管理</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li><a href="#">系统管理</a></li>
					<li class="active">资源管理</li>
				</ol>
			</section>
			<!-- 网页正文-主体 -->
			<section class="content">
				<div class="box box-solid">
					<div class="box-header with-border">
						<form class="form-inline" id="data-table-search">
							<div class="form-group form-group-sm">
								<div class="input-group input-group-sm">
									<div class="input-group-addon">资源名</div>
									<input type="text" name="name" class="form-control input-sm" placeholder="请输入资源名">
								</div>
							</div>
							<button type="submit" class="btn btn-primary btn-sm">查找</button>
							<button type="button" class="btn btn-primary btn-sm" data-id="" data-oper="add" data-toggle="modal" data-target="#EditModal">添加</button>
						</form>
					</div>
					<div class="box-body">
						<table id="data-table" class="table table-bordered table-striped table-hover">
							<thead>
								<tr>
									<th>ID</th>
									<th>图标</th>
									<th>编码</th>
									<th>资源名</th>
									<th>上级资源</th>
									<th>标识</th>
									<th>连接地址</th>
									<th></th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</section>
			<!-- /.content -->
		</div>
		<!-- 网页底部 -->
		<%include("../../tpl/footer.html"){}%>
	</div>
	<div class="modal fade" id="EditModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">编辑资源</h4>
				</div>
				<form class="form-horizontal" action="save.json">
					<div class="modal-body">
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">ID</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<input type="text" class="form-control input-sm" name="id" placeholder="请输入ID">
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">Oper</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<input type="text" class="form-control input-sm" name="oper" placeholder="请输入Oper">
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">编码</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<input type="text" class="form-control input-sm" name="code" placeholder="请输入编码" readonly>
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">资源名</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<input type="text" class="form-control input-sm" name="name" placeholder="请输入资源名" required>
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">上级资源</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<select name="parent" class="form-control input-sm" id="resource-paret-select">
									<option value="">请选择上级资源</option>
								</select>
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">标识</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<input type="text" class="form-control input-sm" name="identity" placeholder="请输入标识" required>
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">图标样式</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<input type="text" class="form-control input-sm" name="icon" placeholder="请输入图标样式">
							</div>
						</div>
						<div class="form-group form-group-sm">
							<label class="col-lg-3 col-md-4 col-sm-4 control-label">连接地址</label>
							<div class="col-lg-6 col-md-7 col-sm-8">
								<input type="text" class="form-control input-sm" name="linkurl" placeholder="请输入连接地址" required>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="submit" class="btn btn-primary">提交</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<%include("../../tpl/script.html"){}%>
	<script type="text/javascript">
		$(document).ready(function() {
			// 初始化表格
			var dataTable = $('#data-table').DataTable({
				'columns' : [ {
					'data' : 'id'
				}, {
					'data' : 'icon',
					'render' : function(data, type, full, meta) {
						return '<i class="' + data + '"></i>';
					}
				}, {
					'data' : 'code'
				}, {
					'data' : 'name'
				}, {
					'data' : 'parent.name',
					'defaultContent' : '--顶层'
				}, {
					'data' : 'identity'
				}, {
					'data' : 'linkurl'
				}, {
					'width' : '80px',
					'render' : function(data, type, full, meta) {
						return laytpl($('#operation_buttons').html()).render(full);
					}
				} ]
			});

			$('#data-table-search').on('submit', function() {
				dataTable.ajax.reload();
				return false;
			});

			$('#data-table').on('click', 'button[event-click="delGridRow"]', function() {
				var _this = $(this);
				var layer_c = layer.confirm('确定要删除该资源？', {
					btn : [ '确定', '取消' ]
				}, function() {
					$.getLoading('save.json?oper=del&id=' + _this.data('id'), function() {
						dataTable.row(_this.parents('tr')).remove().draw();
						layer.close(layer_c);
					});
				}, function() {
					layer.close(layer_c);
				});
				return false;
			});
			$('#EditModal').on('show.bs.modal', function(e) {
				var _this = $(this);
				var _button = $(e.relatedTarget);
				var _table_tr = _button.parents('tr');
				var data = (_table_tr.length <= 0) ? {} : dataTable.row(_table_tr).data();

				// 数据缓存
				$.extend(data, {
					'id' : _button.data('id'),
					'oper' : _button.data('oper')
				});
				// 表单填充
				_this.find('input').each(function() {
					$(this).val(data[this.name] || '');
				});

				// 加载可选上级列表
				$.getLoading('resources.json', function(result) {
					var _select = $('#resource-paret-select').html('<option value="">顶层</option>');

					resourceParetSelectBuider(result.data, 1, _select, (data.code || ''));
				});
			});
			// 表单提交校验
			$('#EditModal form').on('submit-success', function(e, result) {
				$('#EditModal').modal('hide');
				$(document).triggerHandler('reload-menu');

				dataTable.ajax.reload(null, false);

				layer.msg("提交成功", {
					icon : 1,
					time : 1500
				});
			}).validate();
			// 构建父级资源选择列表
			function resourceParetSelectBuider(resources, level, _select, _code) {
				$.each(resources, function() {
					var _option = '';
					var _disabled = this.code === _code;
					var _selected = this.code === _code.substr(0, _code.length - 2);

					// 构造选项
					_option += '<option value="';
					_option += this.code;
					_option += '"';
					_option += (_disabled ? ' disabled' : '');
					_option += (_selected ? ' selected' : '');
					_option += '>';

					for (var i = 0; i < level; i++) {
						_option += '--';
					}
					_option += ' ';
					_option += this.name;
					_option += '</option>';

					_select.append(_option);
					// 添加下级选项
					if (!!this.children) {
						resourceParetSelectBuider(this.children, (level + 1), _select, _code);
					}
				});
			}
		});
	</script>
	<script type="text/html" id="operation_buttons">
        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-info" data-id="{{d.id}}" data-oper="edit" data-toggle="modal" data-target="#EditModal">修改</button>
            <button type="button" class="btn btn-danger" event-click="delGridRow" data-id="{{d.id}}" data-account="{{d.account}}">删除</button>
        </div>
    </script>
</body>
</html>
